<template>
  <div id="app">
    <div id="mmm">
        <nav>
            <div class="xinxi">
                <div class="touxiang">

                </div>
                <div class="nicheng">
                    爱丽丝
                </div>
            </div>
        </nav>
        <section>
            <div class="quanbudingdan">
                <div class="left">
                    <img src="../assets/images/我的 (5).png" alt="">
                    <span>全部订单</span>
                </div>
                <div class="right">
                    <img src="../assets/images/前进.png" alt="">
                </div>
            </div>
        </section>
        <nav>
            <div class="daohang">
                <div class="one">
                    <img src="../assets/images/我的 (4).png" alt="">
                    <span>待付款</span>
                </div>
                <div class="one">
                    <img src="../assets/images/我的 (3).png" alt="">
                    <span>代发货</span>
                </div>
                <div class="one">
                    <img src="../assets/images/我的 (8).png" alt="">
                    <span>待评价</span>
                </div>
            </div>
            <div class="wdxx">
                <div class="left">
                    <img src="../assets/images/我的 (6).png" alt="">
                    <span>我的消息</span>
                </div>
                <div class="right">
                    <img src="../assets/images/前进.png" alt="">
                </div>
            </div>
            <div class="wdsc">
                <div class="left">
                    <img src="../assets/images/我的 (7).png" alt="">
                    <span>我的收藏</span>
                </div>
                <div class="right">
                    <img src="../assets/images/前进.png" alt="">
                </div>
            </div>
            <div class="wddz">
                <div class="left">
                    <img src="../assets/images/我的 (1).png" alt="">
                    <span>我的地址</span>
                </div>
                <div class="right">
                    <span class="gensui">广州市天河区车陂黄洲工业园</span>
                    <img src="../assets/images/前进.png" alt="">
                </div>
            </div>
            <div class="wdyh">
                <div class="left">
                    <img src="../assets/images/我的 (2).png" alt="">
                    <span>我的优惠</span>
                </div>
                <div class="right">
                    <span class="gensui">微信支付</span>
                    <img src="../assets/images/前进.png" alt="">
                </div>
            </div>
            <div class="zhanwei"></div>
            <div class="mdsm">
                <div class="left">
                    <img src="../assets/images/我的 (9).png" alt="">
                    <span>门店扫码</span>
                </div>
                <div class="right">
                    <span class="gensui">扫码提货</span>
                    <img src="../assets/images/前进.png" alt="">
                </div>
            </div>
        </nav>
    </div>
  <Footer :active="2"></Footer>
  </div>
</template>

<script>
import Footer from '../components/footer.vue'
import Header from '../components/header.vue'

export default {
components:{
  Footer,
  Header
}
}
</script>

<style lang="less" scoped>
nav {
    background-color: #fff;

    .xinxi {
        height: 4.51rem;
        background: #6693A6;
        display: flex;
        flex-direction: column;
        align-items: center;

        .touxiang {
            margin-top: 0.36rem;
            width: 2.29rem;
            height: 2.29rem;
            border-radius: 50%;
            background-color: #fff;
            margin-bottom: 0.44rem;

        }

        .nicheng {
            font-size: 0.48rem;
            font-family: PingFang;
            font-weight: 500;
            color: #FFFFFF;
        }
    }
}

section {
    background-color: #fff;

    .quanbudingdan {
        display: flex;
        height: 1.17rem;
        justify-content: space-between;
        align-items: center;
        padding-left: 0.53rem;
        padding-right: 0.4rem;
        border-bottom: 0.01rem solid #E5E5E5;

        .left {
            display: flex;

            img {
                width: 0.49rem;
            }

            span {
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #000000;
                margin-left: 0.33rem;
            }
        }

        .right {
            img {
                width: 0.21rem;
            }
        }
    }
}

nav {
    background-color: #fff;

    .daohang {
        width: 10rem;
        height: 2.27rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-bottom: 0.27rem solid #efeff4;

        .one {
            font-size: 0.35rem;
            font-family: PingFang;
            font-weight: 500;
            color: #000000;
            text-align: center;

            span {
                display: block;
                margin-top: 0.25rem;
            }

            img {
                width: 0.49rem;
                height: 0.51rem;
            }
        }
    }

    .wdxx {
        display: flex;
        height: 1.17rem;
        justify-content: space-between;
        align-items: center;
        margin-left: 0.53rem;
        padding-right: 0.4rem;
        border-bottom: 0.01rem solid #E5E5E5;

        .left {
            display: flex;

            img {
                width: 0.49rem;
            }

            span {
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #000000;
                margin-left: 0.33rem;
            }
        }

        .right {
            img {
                width: 0.21rem;
            }
        }
    }

    .wdsc {
        display: flex;
        height: 1.17rem;
        justify-content: space-between;
        align-items: center;
        margin-left: 0.53rem;
        padding-right: 0.4rem;
        border-bottom: 0.01rem solid #E5E5E5;

        .left {
            display: flex;

            img {
                width: 0.49rem;
            }

            span {
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #000000;
                margin-left: 0.33rem;
            }
        }

        .right {
            img {
                width: 0.21rem;
            }
        }
    }

    .wddz {
        display: flex;
        height: 1.17rem;
        justify-content: space-between;
        align-items: center;
        margin-left: 0.53rem;
        padding-right: 0.4rem;
        border-bottom: 0.01rem solid #E5E5E5;

        .left {
            display: flex;

            img {
                width: 0.49rem;
            }

            span {
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #000000;
                margin-left: 0.33rem;
            }
        }

        .right {
            img {
                width: 0.21rem;
            }
        }
    }

    .wdyh {
        display: flex;
        height: 1.17rem;
        justify-content: space-between;
        align-items: center;
        margin-left: 0.53rem;
        padding-right: 0.4rem;

        .left {
            display: flex;

            img {
                width: 0.49rem;
            }

            span {
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #000000;
                margin-left: 0.33rem;
            }
        }

        .right {
            img {
                width: 0.21rem;
            }
        }
    }

    .mdsm {
        display: flex;
        height: 1.17rem;
        justify-content: space-between;
        align-items: center;
        margin-left: 0.53rem;
        padding-right: 0.4rem;
        border-bottom: 0.01rem solid #E5E5E5;
        ;

        .left {
            display: flex;

            img {
                width: 0.49rem;
            }

            span {
                font-size: 0.4rem;
                font-family: PingFang;
                font-weight: 500;
                color: #000000;
                margin-left: 0.33rem;
            }
        }

        .right {
            img {
                width: 0.21rem;
            }
        }
    }

    .gensui {
        font-size: 0.4rem;
        font-family: PingFang;
        font-weight: 500;
        color: #B2B2B2;
    }

    .zhanwei {
        height: 0.27rem;
        background-color: #efeff4;
    }
}
</style>